<template>
    <div class="rootMain">
        <div class="tabs">
            <div
                v-for="(item, index) in tnavList"
                :key="index"
                class="tab"
                :class="{ 'tab-active': current == index }"
                @click="menuClick(item.id, index)"
            >
                {{ item.name }}
            </div>
        </div>
        <el-form label-position="right" label-width="140px">
            <el-form-item v-if="fundShow" label="公积金贷款(万元)">
                <el-input
                    placeholder="请输入贷款金额"
                    maxlength="4"
                    v-model="loansCount"
                ></el-input>
            </el-form-item>
            <el-form-item v-if="businessShow" label="商业贷款(万元)">
                <el-input
                    placeholder="请输入贷款金额"
                    maxlength="4"
                    v-model="businessCount"
                ></el-input>
            </el-form-item>
            <el-form-item v-if="fundShow" label="公积金利率(%)">
                <el-select
                    v-model="rateIndex"
                    placeholder="请选择"
                    @change="rateChange"
                >
                    <el-option
                        v-for="(item, index) in loansRate"
                        :key="index"
                        :label="item.name"
                        :value="index"
                        placeholder="请选择"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="businessShow" label="商业利率(%)">
                <el-select
                    v-model="businessIndex"
                    placeholder="请选择"
                    @change="businessChange"
                >
                    <el-option
                        v-for="(item, index) in businessRate"
                        :key="index"
                        :label="item.name"
                        :value="index"
                        placeholder="请选择"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="rateShow" label="自定义公积金利率(%)">
                <el-input
                    placeholder="请输入贷款利率"
                    maxlength="4"
                    v-model="yourRate"
                ></el-input>
            </el-form-item>
            <el-form-item v-if="yourBusinessShow" label="自定义商业利率(%)">
                <el-input
                    placeholder="请输入贷款利率"
                    maxlength="4"
                    v-model="yourBusiness"
                ></el-input>
            </el-form-item>
            <el-form-item label="按揭年数">
                <el-select
                    v-model="yearIndex"
                    placeholder="请选择"
                    @change="yearChange"
                >
                    <el-option
                        v-for="(item, index) in mortgageYear"
                        :key="index"
                        :label="item.name"
                        :value="index"
                        placeholder="请选择"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="还款方式">
                <el-select
                    v-model="refundIndex"
                    placeholder="请选择"
                    @change="refundChange"
                >
                    <el-option
                        v-for="(item, index) in refundWay"
                        :key="index"
                        :label="item.name"
                        :value="index"
                        placeholder="请选择"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <div class="but">
            <el-button @click="resetBtn">重置</el-button>
            <el-button type="primary" @click="countBtn">计算</el-button>
        </div>

        <div v-if="resultShow" class="result">
            <el-descriptions title="计算结果：" :column="1">
                <el-descriptions-item label="每月月供参考(元)">
                    {{ homePrice }}
                </el-descriptions-item>
            </el-descriptions>
            <div class="qumaohao">
                <el-descriptions
                    v-if="refundType == 0"
                    title="等额本息："
                    :column="1"
                >
                    <el-descriptions-item
                        label="还款期内，每月偿还同等数额的贷款(包括本金和利息)。"
                    >
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions
                    v-if="refundType == 1"
                    title="等额本金："
                    :column="1"
                >
                    <el-descriptions-item
                        label="还款期内把贷款数总额等分，每月偿还同等数额的本金和剩余贷款在该月所产生的利息，随着时间的推移每月还款数也越来越少"
                    >
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "homeCount",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            loansCount: "", //公积金贷款总额
            businessCount: "", //商业贷款总额
            yourRate: "", //自定义公积金利率
            yourBusiness: "", //自定义商业利率
            rateShow: false, //监听自定义公积金利率显示
            yourBusinessShow: false, //监听自定义商业利率显示

            //公积金贷款利率
            rateIndex: "",
            loansRate: [
                {
                    type: 0,
                    name: "首套1-5年(含)  (2.6%)",
                    rate: 0.026,
                },
                {
                    type: 1,
                    name: "首套5年以上  (3.1%)",
                    rate: 0.031,
                },
                {
                    type: 2,
                    name: "二套1-5年(含)  (3.025%)",
                    rate: 0.03025,
                },
                {
                    type: 3,
                    name: "二套5年以上  (3.575%)",
                    rate: 0.03575,
                },
                {
                    type: 4,
                    name: "其他利率  (可输入)",
                },
            ],

            fundShow: true,
            businessShow: false,

            //商业贷款利率
            businessIndex: "",
            businessRate: [
                {
                    type: 0,
                    name: "首套5年以上基准利率(4.900%)",
                    rate: 0.049,
                },
                {
                    type: 1,
                    name: "二套5年以上最低利率(5.390%)",
                    rate: 0.0539,
                },
                {
                    type: 2,
                    name: "其他利率(可输入)",
                },
            ],

            //还款方式
            refundIndex: "",
            refundWay: [
                {
                    type: 0,
                    name: "等额本息",
                },
                {
                    type: 1,
                    name: "等额本金",
                },
            ],

            //按揭期数
            yearIndex: "",
            mortgageYear: [
                {
                    type: 0,
                    name: "1年(12期)",
                    num: 12,
                },
                {
                    type: 1,
                    name: "2年(24期)",
                    num: 24,
                },
                {
                    type: 2,
                    name: "3年(36期)",
                    num: 36,
                },
                {
                    type: 3,
                    name: "4年(48期)",
                    num: 48,
                },
                {
                    type: 4,
                    name: "5年(60期)",
                    num: 60,
                },
                {
                    type: 5,
                    name: "6年(72期)",
                    num: 72,
                },
                {
                    type: 6,
                    name: "7年(84期)",
                    num: 84,
                },
                {
                    type: 7,
                    name: "8年(96期)",
                    num: 96,
                },
                {
                    type: 8,
                    name: "9年(108期)",
                    num: 108,
                },
                {
                    type: 9,
                    name: "10年(120期)",
                    num: 120,
                },
                {
                    type: 10,
                    name: "11年(132期)",
                    num: 132,
                },
                {
                    type: 11,
                    name: "12年(144期)",
                    num: 144,
                },
                {
                    type: 12,
                    name: "13年(156期)",
                    num: 156,
                },
                {
                    type: 13,
                    name: "14年(168期)",
                    num: 168,
                },
                {
                    type: 14,
                    name: "15年(180期)",
                    num: 180,
                },
                {
                    type: 15,
                    name: "16年(192期)",
                    num: 192,
                },
                {
                    type: 16,
                    name: "17年(204期)",
                    num: 204,
                },
                {
                    type: 17,
                    name: "18年(216期)",
                    num: 216,
                },
                {
                    type: 18,
                    name: "19年(228期)",
                    num: 228,
                },
                {
                    type: 19,
                    name: "20年(240期)",
                    num: 240,
                },
                {
                    type: 20,
                    name: "21年(252期)",
                    num: 252,
                },
                {
                    type: 21,
                    name: "22年(264期)",
                    num: 264,
                },
                {
                    type: 22,
                    name: "23年(276期)",
                    num: 276,
                },
                {
                    type: 23,
                    name: "24年(288期)",
                    num: 288,
                },
                {
                    type: 24,
                    name: "25年(300期)",
                    num: 300,
                },
                {
                    type: 25,
                    name: "26年(312期)",
                    num: 312,
                },
                {
                    type: 26,
                    name: "27年(324期)",
                    num: 324,
                },
                {
                    type: 27,
                    name: "28年(336期)",
                    num: 336,
                },
                {
                    type: 28,
                    name: "29年(348期)",
                    num: 348,
                },
                {
                    type: 29,
                    name: "30年(360期)",
                    num: 360,
                },
            ],

            //tab栏选项
            tnavList: [
                {
                    id: 1,
                    name: "公积金贷款",
                },
                {
                    id: 2,
                    name: "商业贷款",
                },
                {
                    id: 3,
                    name: "组合贷款",
                },
            ],
            current: 0, //一级导航序号,

            actualRate: null, //实际选择的公积金利率
            actualBusiness: null, //实际选择的商业利率
            actualYear: null, //实际选择的期数

            homePrice: null, //还款月供

            resultShow: false,

            refundType: null,

            menuType: 1,
        };
    },
    watch: {
        rateIndex(e) {
            if (e == 4) {
                this.rateShow = true;
            } else {
                this.rateShow = false;
            }
        },

        businessIndex(e) {
            if (e == 2) {
                this.yourBusinessShow = true;
            } else {
                this.yourBusinessShow = false;
            }
        },
    },
    created() {},
    mounted() {},
    computed: {},
    methods: {
        menuClick(id, index) {
            this.menuType = id;
            this.current = index;
            if (id == 1) {
                this.loansCount = "";
                this.businessCount = "";
                this.yourRate = "";
                this.yourBusiness = "";
                this.refundIndex = "";
                this.rateIndex = "";
                this.yearIndex = "";
                this.businessIndex = "";
                this.fundShow = true;
                this.businessShow = false;
                this.rateShow = false;
                this.yourBusinessShow = false;
                this.resultShow = false;
            } else if (id == 2) {
                this.loansCount = "";
                this.businessCount = "";
                this.yourRate = "";
                this.yourBusiness = "";
                this.refundIndex = "";
                this.rateIndex = "";
                this.yearIndex = "";
                this.businessIndex = "";
                this.fundShow = false;
                this.businessShow = true;
                this.rateShow = false;
                this.yourBusinessShow = false;
                this.resultShow = false;
            } else if (id == 3) {
                this.loansCount = "";
                this.businessCount = "";
                this.yourRate = "";
                this.yourBusiness = "";
                this.refundIndex = "";
                this.rateIndex = "";
                this.yearIndex = "";
                this.businessIndex = "";
                this.fundShow = true;
                this.businessShow = true;
                this.rateShow = false;
                this.yourBusinessShow = false;
                this.resultShow = false;
            }
        },

        //公积金利率计算方式
        rateChange(index) {
            this.rateIndex = index;
            if (index != 4) {
                this.actualRate = this.loansRate[index].rate / 12;
            }
        },

        //商业利率计算方式
        businessChange(index) {
            this.businessIndex = index;
            if (index != 2) {
                this.actualBusiness = this.businessRate[index].rate / 12;
            }
        },

        //按揭年数选择
        yearChange(index) {
            this.yearIndex = index;
            this.actualYear = this.mortgageYear[index].num;
        },

        //还款方式选择
        refundChange(index) {
            this.refundIndex = index;
        },

        //重置
        resetBtn() {
            this.loansCount = "";
            this.businessCount = "";
            this.yourRate = "";
            this.yourBusiness = "";
            this.refundIndex = "";
            this.rateIndex = "";
            this.yearIndex = "";
            this.businessIndex = "";
            this.rateShow = false;
            this.yourBusinessShow = false;
            this.resultShow = false;
        },

        message(m) {
            this.$message({
                message: m,
                type: "warning",
            });
        },

        //计算
        countBtn() {
            this.refundType = this.refundIndex;
            if (this.menuType == 1) {
                if (this.loansCount == "") {
                    this.message("请填写贷款总额");
                    return;
                }
                if (this.rateIndex == -1) {
                    this.message("请选择贷款利率");
                    return;
                } else if (this.rateIndex == 4 && this.yourRate == "") {
                    this.message("请填写贷款利率");
                    return;
                }
                if (this.yearIndex == -1) {
                    this.message("请选择按揭期数");
                    return;
                }
                if (this.refundIndex == -1) {
                    this.message("请选择还款方式");
                    return;
                }

                var actualRate;
                if (this.rateIndex == 4) {
                    actualRate = this.yourRate / 100 / 12;
                    console.log("这里是自定义利率");
                } else {
                    actualRate = this.actualRate;
                    console.log("这里是固定利率");
                }

                if (this.refundIndex == 0) {
                    const rate =
                        (this.loansCount *
                            10000 *
                            actualRate *
                            Math.pow(1 + actualRate, this.actualYear)) /
                        (Math.pow(1 + actualRate, this.actualYear) - 1);
                    this.homePrice = rate.toFixed(2);
                    this.resultShow = true;
                } else {
                    const rate =
                        (this.loansCount * 10000) / this.actualYear +
                        this.loansCount * 10000 * actualRate;
                    this.homePrice = rate.toFixed(2);
                    this.resultShow = true;
                }
            } else if (this.menuType == 2) {
                if (this.businessCount == "") {
                    this.message("请填写贷款总额");
                    return;
                }
                if (this.businessIndex == -1) {
                    this.message("请选择贷款利率");
                    return;
                } else if (this.businessIndex == 2 && this.yourBusiness == "") {
                    this.message("请填写贷款利率");
                    return;
                }
                if (this.yearIndex == -1) {
                    this.message("请选择按揭期数");
                    return;
                }
                if (this.refundIndex == -1) {
                    this.message("请选择还款方式");
                    return;
                }
                var actualRate;
                if (this.businessIndex == 2) {
                    actualRate = this.yourBusiness / 100 / 12;
                    console.log("这里是自定义利率");
                } else {
                    actualRate = this.actualBusiness;
                    console.log("这里是固定利率");
                }
                if (this.refundIndex == 0) {
                    const rate =
                        (this.businessCount *
                            10000 *
                            actualRate *
                            Math.pow(1 + actualRate, this.actualYear)) /
                        (Math.pow(1 + actualRate, this.actualYear) - 1);
                    this.homePrice = rate.toFixed(2);
                    this.resultShow = true;
                } else {
                    const rate =
                        (this.businessCount * 10000) / this.actualYear +
                        this.businessCount * 10000 * actualRate;
                    this.homePrice = rate.toFixed(2);
                    this.resultShow = true;
                }
            } else if (this.menuType == 3) {
                if (this.loansCount == "") {
                    this.message("请填写公积金贷款总额");
                    return;
                }
                if (this.rateIndex == -1) {
                    this.message("请选择贷款利率");
                    return;
                } else if (this.rateIndex == 4 && this.yourRate == "") {
                    this.message("请填写贷款利率");
                    return;
                }
                if (this.businessCount == "") {
                    this.message("请填写商业贷款总额");
                    return;
                }
                if (this.businessIndex == -1) {
                    this.message("请选择贷款利率");
                    return;
                } else if (this.businessIndex == 2 && this.yourBusiness == "") {
                    this.message("请填写贷款利率");
                    return;
                }
                if (this.yearIndex == -1) {
                    this.message("请选择按揭期数");
                    return;
                }
                if (this.refundIndex == -1) {
                    this.message("请选择还款方式");
                    return;
                }

                var actualRate;
                if (this.rateIndex == 4) {
                    actualRate = this.yourRate / 100 / 12;
                    console.log("这里是自定义利率");
                } else {
                    actualRate = this.actualRate;
                    console.log("这里是固定利率");
                }
                var actualRate2;
                if (this.businessIndex == 2) {
                    actualRate2 = this.yourBusiness / 100 / 12;
                    console.log("这里是自定义利率");
                } else {
                    actualRate2 = this.actualBusiness;
                    console.log("这里是固定利率");
                }

                if (this.refundIndex == 0) {
                    const rate =
                        (this.loansCount *
                            10000 *
                            actualRate *
                            Math.pow(1 + actualRate, this.actualYear)) /
                        (Math.pow(1 + actualRate, this.actualYear) - 1);
                    const rate2 =
                        (this.businessCount *
                            10000 *
                            actualRate2 *
                            Math.pow(1 + actualRate2, this.actualYear)) /
                        (Math.pow(1 + actualRate2, this.actualYear) - 1);
                    this.homePrice = (rate + rate2).toFixed(2);
                    this.resultShow = true;
                } else {
                    const rate =
                        (this.loansCount * 10000) / this.actualYear +
                        this.loansCount * 10000 * actualRate;
                    const rate2 =
                        (this.businessCount * 10000) / this.actualYear +
                        this.businessCount * 10000 * actualRate2;
                    this.homePrice = (rate + rate2).toFixed(2);
                    this.resultShow = true;
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.rootMain {
    padding: 20px 22px;
}

.tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;
    padding: 0 15px 15px 0;
    margin-bottom: 20px;
    .tab {
        color: #333333;
        font-size: 14px;
        cursor: pointer;
        text-align: center;
        margin-right: 20px;
    }
    .tab-active {
        color: rgb(28, 135, 243);
    }
}

.qumaohao {
    ::v-deep .el-descriptions-item__label.has-colon::after {
        content: "";
    }
}

.result {
    padding-top: 25px;
}
</style>
